<template>
  <view class="box">
    <view class="content">
      <view class="typetitle">请选择账户类型</view>
      <!-- <u-radio-group 
    v-model="checkedvalue"
    iconPlacement="right">
	<u-radio activeColor="red" label="思悠悠，恨悠悠，恨到归时方始休"></u-radio>
</u-radio-group> -->
      <view class="flexCenterSpaceBetween linetype" @click="handcheck(3)">
        <view class="flexCenter">
          <image class="baopay" :src="`${state.baseimgurl}/yinpay.png`">
          </image>
          <view>银行卡</view>
        </view>
        <image
          class="checkbox"
          :src="`${state.baseimgurl}/${
            checkedvalue == 3 ? 'checked.png' : 'nocheck.png'
          }`"
        >
        </image>
      </view>
      <view class="flexCenterSpaceBetween linetype" @click="handcheck(1)">
        <view class="flexCenter">
          <image class="baopay" :src="`${state.baseimgurl}/baopay.png`">
          </image>
          <view>支付宝</view>
        </view>
        <image
          class="checkbox"
          :src="`${state.baseimgurl}/${
            checkedvalue == 1 ? 'checked.png' : 'nocheck.png'
          }`"
        >
        </image>
      </view>
    </view>

    <view class="content" v-if="checkedvalue==3">
      <u--form :model="formData" :rules="rules" ref="uForm" labelWidth="200">
        <view class="formbox">
          <u-form-item
            label="银行开户姓名 *"
            prop="accountOpener"
            :borderBottom="true"
          >
            <u--input
              border="none"
              clearable
              v-model="formData.accountOpener"
            />
          </u-form-item>
          <u-form-item label="银行名称 *" prop="accountName" :borderBottom="true">
            <u--input border="none" clearable v-model="formData.accountName" />
          </u-form-item>

          <u-form-item label="银行卡号 *" prop="account">
            <u--input border="none" clearable v-model="formData.account" />
          </u-form-item>
        </view>
      </u--form>

    </view>
    <view class="content" v-else>
      <u--form :model="formData2" :rules="rules" ref="uForm" labelWidth="200">
        <view class="formbox">
          <u-form-item label="支付宝账号 *" prop="aliPayAccount" :borderBottom="true">
            <u--input border="none" clearable v-model="formData.aliPayAccount" />
          </u-form-item>

          <u-form-item label="支付宝姓名 *" prop="aliPayAccountOpener">
            <u--input border="none" clearable v-model="formData.aliPayAccountOpener" />
          </u-form-item>
        </view>
        <view class="huitext">您绑定的实名为{{name}}，请填写与实名一致的</view>
      </u--form>

    </view>
    <view class="huitext">
      <view>温馨提示：</view>
      <view> 1、手机银行支持添加以下类型的账户：储蓄卡、凭密支取的借记卡</view>
      <view> 2、短期只支持绑定一张卡</view>
      <view>3、暂不支持Visa卡</view>
    </view>

    <!-- 吸底工具栏 -->
    <view
      class="toolbar-height"
      :style="{ paddingBottom: safeAreaInsets?.bottom + 30 + 'px' }"
    ></view>
    <view
      class="toolbar"
      :style="{ paddingBottom: safeAreaInsets?.bottom + 30 + 'px' }"
    >
      <view class="button-grounp">
        <view @tap="submit" class="button payment-button"> 提交 </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { memberPayAccountAdd } from "@/utils/api";
import { onLoad } from "@dcloudio/uni-app";
import { ref, inject, reactive } from "vue";
const baseimgurl = inject("$baseimgurl");
const state = reactive({
  baseimgurl: baseimgurl,
});
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
const formData = reactive({
  accountName: "",
});
const formData2 = reactive({
  accountName: "",
});
// 选择绑定的类型
const checkedvalue = ref(3);
const name=ref('')
const handcheck = (val) => {
  checkedvalue.value = val;
};
// 页面加载
onLoad(() => {
  // formData.id = uni.getStorageSync("userId");
  name.value = JSON.parse(uni.getStorageSync("userinfo")).certificateName;

});

const rules = {
  accountOpener: {
    type: "string",
    required: true,
    message: "请输入",
    trigger: ["blur"],
  },
  accountName: {
    type: "string",
    required: true,
    message: "请输入",
    trigger: ["blur"],
  },
  account: {
    type: "string",
    required: true,
    message: "请输入",
    trigger: ["blur"],
  },
};
const submit = () => {

    let param = JSON.parse(JSON.stringify(formData));
    param.payType=checkedvalue.value
    memberPayAccountAdd(param).then((res) => {
      console.log(66666, res);
      uni.navigateBack()
    });

};
</script>
<style lang="scss" scoped>
.box {
  padding: 20rpx;
}
.payList {
  margin: 20rpx;
  background: #ffffff;
}
.baopay {
  width: 60rpx;
  height: 60rpx;
}
.content {
  padding: 26rpx 32rpx;
  background: #ffffff;
  margin-bottom: 20rpx;
  border-radius: 14rpx;
}
.typetitle {
  font-size: 27rpx;
  font-weight: 500;
  color: #060c3c;
}
.linetype {
  padding: 20rpx;
  border-bottom: 2rpx solid #f9f9f9;
}
.baopay {
  margin-right: 22rpx;
}
.checkbox {
  width: 34rpx;
  height: 34rpx;
}
.huitext {
  font-size: 22rpx;
  color: #979797;
  line-height: 31rpx;
}
</style>
